<template>
	<view class="bg-white" style="height: 100vh;">
		<!-- 顶部导航栏 -->
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="content">修改密码</block>
		</cu-custom>
		<message ref="message"></message>
		<view>
			<view style="height: 100rpx;" />
			<form ref="loginRef" class="align-center justify-center" @submit="formSubmit" @reset="formReset">
				<view class="flex justify-center align-center margin-bottom">
					<view class="iconfont icon-ziyuanxhdpi input-lable"></view>
					<input class="form-input" v-model="loginForm.password" maxlength="30" type="password"
						name="password" placeholder="旧密码" />
				</view>
				<view class="flex justify-center align-center margin-bottom">
					<view class="iconfont icon-ziyuanxhdpi input-lable"></view>
					<input class="form-input" v-model="loginForm.newPass" maxlength="30" type="password"
						name="newPass" placeholder="新密码" />
				</view>
				<view class="flex justify-center align-center">
					<view class="iconfont icon-ziyuanxhdpi input-lable"></view>
					<input class="form-input" v-model="loginForm.newPass1" maxlength="30" type="password"
						name="newPass1" placeholder="确认密码" />
				</view>
				<view class="flex justify-center margin">
					<button type="default" form-type="reset" style="width: 35%; margin-right: 50rpx;">重置</button>
					<button form-type="submit" style="width: 35%;">确认修改</button>
				</view>
			</form>
		</view>

		<!-- 行为验证码 -->
		<verify ref="verify" :captchaType="'clickWord'" :imgSize="{ width: '260px', height: '135px' }"
			@success="editPass">
		</verify>
	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker.js'
	import Verify from '@/components/verify/verify.vue'
	import {
		updatePassword
	} from '@/api/user.js'

	export default {
		components: {
			Verify
		},
		data() {
			return {
				loginForm: {
					password: '',
					newPass: '',
					newPass1: ''
				}
			}
		},
		onShow() {
			if(!this.$store.getters.token) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		methods: {
			// 点击登录处理事件
			formSubmit: function(e) {
				// console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				//定义表单规则
				var rule = [{
						name: "password",
						checkType: "string",
						checkRule: "6,20",
						errorMsg: "旧密码至少6个字符"
					},
					{
						name: "newPass",
						checkType: "string",
						checkRule: "6,20",
						errorMsg: "新密码至少6个字符"
					},
					{
						name: "newPass1",
						checkType: "string",
						checkRule: "6,20",
						errorMsg: "确认密码至少6个字符"
					},
					{
						name: "newPass1",
						checkType: "same",
						checkRule: this.loginForm.newPass,
						errorMsg: "两次密码不一致"
					}
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					// 调用行为验证码
					this.$refs.verify.show()
				} else {
					this.$refs.message.error({
						title: graceChecker.error,
						duration: 2000
					})
				}
			},
			// 重置表单事件
			formReset: function(e) {
				this.loginForm = {
					password: '',
					newPass: '',
					newPass1: ''
				}
			},
			// 修改密码事件
			editPass() {
				updatePassword(this.loginForm).then(res => {
					this.formReset()
					this.$refs.message.success({
						title: res.msg,
						duration: 2000
					})
					// 登陆成功，返回上一页吗
					uni.navigateBack();
				}).catch((err) => {
					this.formReset()
					this.$refs.message.error({
						title: err.msg,
						duration: 4000
					})
				})
			}
		}
	}
</script>

<style scoped>
	.input-lable {
		font-size: 40rpx;
		position: absolute;
		left: 100rpx;
	}

	.form-input {
		border: 1px solid #d9d9d9;
		border-radius: 10rpx;
		height: 85rpx;
		font-size: 30rpx;
		width: 80%;
		padding-left: 80rpx;
	}
</style>
